<template>
  <div class="myFriends">
    <div class="part" v-for="item in addressList" :key="item.code">
      <div class="ptitle">{{ item.code }}</div>
      <ul class="addressList">
        <li
          class="flex-start"
          @mouseenter="toggleShowDelete(it.user_id)"
          @mouseleave.self="toggleShowDelete('')"
          v-for="it in item.data"
          :key="it.user_id"
          @dblclick="jumpToChat(it)"
        >
          <div class="avatarBox">
            <avatar :imgID="it.user_img" :id="it.user_id"></avatar>
          </div>
          <div class="userInfo flex-between">
            <p class="userName">{{ it.remarks ? it.remarks : it.user_name }}</p>
            <div class="deltBtn cp" v-if="showDeleteId === it.user_id && !tools.isSelf(it.user_id)" @click="deleteFriend(it.user_id, it.user_name)">删除</div>
          </div>
        </li>
      </ul>
    </div>
    <min-dialog-box v-if="showDeleteDialog" :dialogData="dialogData" @cancelBtnEvent="deleteCancel" @confirmBtnEvent="deleteConfirm"></min-dialog-box>
  </div>
</template>

<script>
export default {
  data () {
    return {
      showDeleteId: '',
      dialogData: null,
      showDeleteDialog: false,
      deleteID: '',
      // 实际渲染的数组
      realList: []
    }
  },
  computed: {
    addressList () {
      const addressList = this.$store.getters.addressList
      return addressList
    }
  },
  created () {
    this.getAddressList()
  },
  methods: {
    getAddressList () {
      this.$store.dispatch('addressList/getMyAddressList')
    },
    toggleShowDelete (id) {
      this.showDeleteId = id
    },
    deleteFriend (id, name) { // 删除好友
      this.deleteID = id
      this.dialogData = {
        mainTips: [`确定删除好友“${name}”？`], // 主提示
        subTips: '删除后，会清空与对方的聊天记录', // 副提示 （补充）
        btnList: [{ // type对应事件名
          name: '确定',
          color: 'blue',
          type: 'confirm'
        }, {
          name: '取消',
          color: 'white',
          type: 'cancel'
        }]
      }
      this.showDeleteDialog = true
    },
    deleteConfirm () {
      this.$store.dispatch('addressList/friendDelete', { deleteID: this.deleteID }).then(res => {
        if (res.data.code === 200) {
          this.showDeleteDialog = false
          this.getAddressList()
          this.$store.commit('chatInformation/reset_identify', {
            id: this.deleteID,
            bool: false
          })
        }
      })
    },
    deleteCancel () {
      this.showDeleteDialog = false
    },
    // 跳转聊天
    jumpToChat (item) {
      this.$store.commit('chatInformation/set_topContact', {
        id: item.user_id,
        name: item.remarks ? item.remarks : item.user_name,
        timestamp: +new Date(),
        in_contact: true,
        id_type: 1,
        messages: [],
        draft: ''
      })
      this.$store.commit('chatInformation/set_current_contact', {
        id: item.user_id,
        id_type: 1,
        in_contact: true
      })
      this.$router.push('/message')
    }
  }
}
</script>

<style scoped lang="scss">
.myFriends {
  padding-top: 20px;
  .part {
    .ptitle {
      margin: 0 20px;
      height: 29px;
      opacity: 1;
      font-size: 14px;
      font-family: PingFangSC, PingFangSC-Regular;
      font-weight: 400;
      text-align: left;
      color: #2e3f64;
      line-height: 20px;
      border-bottom: 1px solid #ebedf3;
    }
    ul.addressList {
      padding: 8px 0 20px;
      li {
        padding: 8px 16px;
        &:hover {
          background: rgba(48, 78, 236, 0.03);
        }
        .avatarBox {
          width: 40px;
          height: 40px;
        }
        .userInfo {
          width: calc(100% - 40px);
          .userName {
            padding-left: 12px;
            height: 40px;
            opacity: 1;
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Medium;
            font-weight: 500;
            text-align: left;
            color: #0D172C;
            line-height: 40px;
          }
          .deltBtn {
            width: 68px;
            height: 32px;
            opacity: 1;
            border: 1px solid #ff3e6d;
            border-radius: 3px;
            opacity: 1;
            font-size: 14px;
            font-family: PingFangSC, PingFangSC-Regular;
            font-weight: 400;
            text-align: center;
            color: #ff3e6d;
            line-height: 32px;
            &:hover {
              opacity: 0.8;
            }
          }
        }
      }
    }
  }
}
</style>
